<template>
    <div  v-loading = "loading">
        <div class="nochance notoucher" v-if="hisActionRec.length == 0">
            <div class="alert">当前尚未对该客户添加行动。</div>
        </div>
        <el-timeline v-else>
            <!--行动记录-->
            <el-timeline-item  v-for="(ac, index) in hisActionRec"
                               :key="index"
                               :timestamp="ac.startTime | format_date"
                                placement="top"
                               color="#008080" >
                <div v-if="ac.tbName === 'a'">
                    <el-tag effect="dark" type="" style="margin-bottom: 10px">{{ac.typeName}}</el-tag>
                    <el-card>
                        <h4 style="margin:10px 0 ">{{ac.detail}}</h4>
                        <p style="color: #5E6D82;margin-top: 14px">{{ac.empName}} 提交于 {{ac.startTime | formatDate}}</p>
                    </el-card>
                </div>
                <!--销售机会-->
                <div v-else-if="ac.tbName === 'o'">
                    <el-tag effect="dark" type="warning" style="margin-bottom: 10px">销售机会记录</el-tag>
                    <el-tag effect="dark" type="warning"  style="margin-bottom: 10px">机会状态:{{ac.typeName}}</el-tag>
                    <el-card>
                        <h4 style="margin:10px 0 ">该客户产生一条新的销售机会</h4>
                        <p style="color: #5E6D82;margin-top: 14px">{{ac.empName}} 提交于 {{ac.startTime | formatDate}}</p>
                    </el-card>

                </div>
                <!--合同-->
                <div v-else>
                    <el-tag effect="dark" type="success" style="margin-bottom: 10px">合同记录</el-tag>
                    <el-tag effect="dark" type="success"  style="margin-bottom: 10px">合同状态:{{ac.typeName}}</el-tag>
                    <el-card>
                        <h4 style="margin:10px 0 ">生成合同</h4>
                        <p style="color: #5E6D82;margin-top: 14px">我方签约人：{{ac.empName}} 签约时间：{{ac.startTime | formatDate}}  到期时间：{{ac.overTime | formatDate}} </p>
                    </el-card>
                </div>

            </el-timeline-item>
        </el-timeline>
    </div>
</template>
<script>
    import {formatTimeToStr} from '@/assets/format.js'
    export default {
        name: "actionRecord",
        data:function () {
            return{
                hisActionRec:[],
                loading: true
            }
        },
        methods:{
            getAllRecord(customerId){
                console.log("刷新了");
                this.$axios.get("api/customer/timeline",{params:{"customerId":customerId}})
                    .then(v => {
                        this.hisActionRec = v.data;
                        window.console.log("this.hisActionRec")
                        window.console.log(this.data)
                        this.loading = false
                    }).catch()
            }

        },
        filters: {
            formatDate : function (time) {
                if(time!=null&&time!="")
                {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd hh:mm");
                }else{
                    return "";
                }
            }
        },
        created() {
            this.getAllRecord(this.$store.state.vueCustomerView.customer.customerId)
        }

    }
</script>

<style scoped>
    .el-tooltip__popper{
        display: block!important;
    }
    .notoucher .alert{ border-radius: 3px; width: 100%;height: 100%;  color: #31708f;
        background-color: #d9edf7;
        border-color: #bce8f1;}
    .nochance .alert{
        border-radius: 3px; width: 97%;height: 100%; padding: 20px 10px 20px 20px;color: #a94442;
        background-color: #f2dede;
        line-height: 20px;
        border-color: #ebccd1;
    }
</style>